<template>
  <div>
    <div class="backdrop" ref="backdrop"></div>
    <div class="nav">
      <el-tabs :stretch="true" type="border-card" value='hall'>
        <el-tab-pane disabled>
          <div style="color: #7cd773" class="fontnav" slot="label">
            <div>
              <img src="/images/imgC_1.png" alt="" />
            </div>
            政策资讯
          </div>
          <mes />
        </el-tab-pane>
        <el-tab-pane name='hall'>
          <div style="color: #6cb3f2" class="fontnav" slot="label">
            <div>
              <img src="/images/imgC_2.png" alt="" />
            </div>
            办事大厅
          </div>
          <hall />
        </el-tab-pane>
        <el-tab-pane disabled>
          <div style="color: #e9b733" class="fontnav" slot="label">
            <div>
              <img src="/images/imgC_3.png" alt="" />
            </div>
            惠企服务
          </div>
          <serve />
        </el-tab-pane>
        <el-tab-pane disabled>
          <div style="color: #f15168" class="fontnav" slot="label">
            <div>
              <img src="/images/imgC_4.png" alt="" />
            </div>
            政企互动
          </div>
          <interact />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import serve from "./serve.vue";
import mes from "./mes.vue";
import interact from "./interact.vue";
import hall from "./hall";
export default {
  data() {
    return {};
  },
  components: {
    serve,
    interact,
    hall,
    mes,
  },
  mounted() {},
};
</script>

<style>
.backdrop {
  width: 100%;
  height: 344px;
  background: url("../assets/background.jpg") top no-repeat;
}
.nav {
  width: 1000px;
  margin: 0px auto;
  margin-top: -102px;
}
.nav .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  height: 142px;
  padding-top: 20px;
}
.nav .el-tabs__content {
  min-height: 150px;
  background-color: #F1F1F1;

}
.fontnav {
  font-size: 20px;
  font-weight: bold;
}

</style>